{% assign data = section.settings %}
{% assign blockId = block_id | default: section.block_id %}

{% capture container %}
{%- if data.is_fill -%}
    full_container_wrapper
{%- else -%}
    container_wrapper
{%- endif -%}
{% endcapture %}

{% if data.collection.id %}
  {% get_collection collections_id={data.collection.id} %}
  {% assign collection = collection %}
{% endif %}

<div class="block_collection_slides overflow-hidden">
  <div class="{{container}}">
    {% assign more_href = '/collections/' | append: collection.handle %}
    {% include 'title', title: data.title, detail: data.detail, more_text: data.more_text, more_href: more_href %}
    <div class="content">
      <div class="swiper relative" id="swiper-{{blockId}}">
        <ul class="swiper-wrapper">
			<li class="swiper-slide">
				<div class="collection_item custom_image public_radius overflow-hidden h-full relative" style="--custom-color: {{data.custom_color}};">
					<div class="img_box h-full relative">
						{% include 'lazy_img',src: data.custom_image.src,alt: data.custom_image.alt,class: 'w-full object-cover h-full' %}
						<div class="mask absolute w-full h-full left-0 top-0" style="--mask-color: {{data.mask_color}};"></div>
					</div>
					<div class="text_box absolute h-full w-full left-0 top-0 flex items-end">
						<div class="text_content md:p-[30px] p-[15px] box-border w-full">
							{% if data.custom_title != '' %}
								<div class="text_title mb-5 uppercase public_title">{{data.custom_title}}</div>
							{% endif %}
							{% if data.custom_detail != '' %}
								<div class="text_detail">{{data.custom_detail}}</div>
							{% endif %}
						</div>
					</div>
				</div>
			</li>
          {% if data.collection.id != '' %}
            {% get_products collection_id={data.collection.id} limit={ data.product_number } %}
            {% for product in products %}
              <li class="swiper-slide">
                {% include 'collection_product', product: product, collection_handle: collection.handle %}
              </li>
            {% endfor %}
          {% else %}
            {% for i in (1..4) %}
              <li class="swiper-slide">
                {% include 'collection_product' %}
              </li>
            {% endfor %}
          {% endif %}
        </ul>

		<div class="btn absolute top-3 right-3 md:flex hidden gap-3 z-10">
            <div class="swiper-button-prev" id="swiper-button-prev-{{blockId}}">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-chevron-left"><title>Left</title><polyline points="15 18 9 12 15 6"></polyline></svg>
            </div>
            <div class="swiper-button-next" id="swiper-button-next-{{blockId}}">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-chevron-right"><title>Right</title><polyline points="9 18 15 12 9 6"></polyline></svg>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function() {
  	let swiper = new Swiper('#swiper-{{blockId}}',{
  		slidesPerView: {{ data.pc_number }},
        spaceBetween: 30,
		navigation: {
			nextEl: "#swiper-button-next-{{blockId}}",
			prevEl: "#swiper-button-prev-{{blockId}}",
		},
  		breakpoints: {
  			767: {
  			  slidesPerView: 1.3,
  			  spaceBetween: 14
  			}
  		}
  	})
  })
</script>

{% schema %}
{
	"tag": "",
	"class": "block_collection_slides",
	"is_global": false,
	"name": {
		"zh_CN": "商品轮播",
		"en_US": "Product carousel"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "专辑",
				"en_US": "Collection"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill"
		},
		{
			"type": "card_input_number",
			"label": {
				"zh_CN": "产品总数量",
				"en_US": "Total quantity of products"
			},
			"max": 1000,
			"min": 1,
			"id": "product_number",
			"default": 8
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "PC每排数量",
				"en_US": "PC number per row"
			},
			"id": "pc_number",
			"max": "5",
			"min": "3",
			"default": "3"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "自定义设置",
				"en_US": "Custom settings"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "自定义图片",
				"en_US": "Custom image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽度1000px以上，高度自适应",
				"en_US": "Recommended width more than 1000px, height adaptive"
			},
			"id": "custom_image"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "自定义标题",
				"en_US": "Custom title"
			},
			"id": "custom_title",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "自定义描述",
				"en_US": "Custom description"
			},
			"id": "custom_detail",
			"default": ""
		},
		{
			"type": "card_color",
			"id": "custom_color",
			"label": {
				"zh_CN": "自定义文字颜色",
				"en_US": "Custom text color"
			},
			"default": "#ffffff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(0,0,0,0)",
			"id": "mask_color"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection": {
				"id": "",
				"title": ""
			},
			"title": "Collection Slides",
			"detail": "",
			"is_fill": false,
			"product_number": "8",
			"pc_number": "4",
			"more_text": "View More",
			"custom_image": {
				"src": "",
				"alt": ""
			},
			"custom_title": "Apparel",
			"custom_detail": "Clothing for outdoor adventures.",
			"custom_color": "#ffffff",
			"mask_color": "rgba(0,0,0,0)"
		},
		"blocks": []
	},
	"icon": "icon-shangpinlunbo"
}
{% endschema %}
